<template>
	<view class="page">
		<view class="page-ctx">
			<!-- 		<view class="page-title">
				我的评价
			</view> -->
			<view class="box-reviews">
				<reviewList :list="reviews" :showRelativeProduct="true" />
			</view>

			<view class="load-more-box" style="margin-top: 50rpx;">
				<u-loadmore :status="loadmore_status" @loadmore="loadMore" />
			</view>

		</view>
	</view>
</template>

<script>
	import reviewList from "@/components/review/reviewList.vue"

	export default {
		components: {
			reviewList
		},
		data() {
			return {
				reviews: [],
				count: 0,
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
			}
		},
		onLoad(option) {
			this.setView();
		},
		onShow() {

		},
		onHide() {},

		onPullDownRefresh() {

		},
		onReachBottom() {
			this.loadMore()
		},

		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_reviews();
				}
			},

			initQuery() {
				this.reviews = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},


			setView() {
				this.query_reviews()
			},

			query_reviews() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_myselfComments',
						...this.pagination,
					},
				}).then(res => {
					if (res.code == 200) {
						this.count = res.data.count;

						res.data.list.forEach(v => {
							v.picList = v.imgs;
							this.format_review_item_star(v)
						})

						this.reviews = this.reviews.concat(res.data.list);
						this.loadmore_status = res.data.count > this.reviews.length ? 'loadmore' : 'nomore';
					}
				})
			},

			//处理评分数据
			format_review_item_star(item) {
				let starItems = [];
				for (var i = 1; i <= 5; i++) {
					starItems.push({
						value: i <= item.star ? 1 : 0
					})
				}
				item.starItems = starItems
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>


<style lang="scss" scoped>
	.page-ctx {
		padding: 20rpx 32rpx;
	}


	.box-reviews {
		margin-top: 0;
		// background: #FFFFFF;
		// border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 0rpx;
	}

	::v-deep .box-reviews .reviews-list .reviews-item {
		background: #FFFFFF;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-bottom: none;
	}
</style>